<template>
  <div>
    <div class="provider-list">
      <div class="header"></div>
      <div class="content content-table">
        <el-table
          ref="multipleTableRef"
          border
          :data="state.list"
          style="width: calc(100% - 20px)"
          :span-method="spanMethod"
        >
          <el-table-column
            property="bannermingcheng"
            label="banner名称"
            width="250"
            align="center"
          />
          <el-table-column
            property="biaoti"
            width="250"
            label="图片"
            align="center"
          >
            <template #default="scope">
              <img
                style="max-width: 200px; object-fit: contain;"
                v-for="(item, index) in scope.row.tupian"
                :src="item.filePath"
                :key="index"
                alt=""
              />
            </template>
          </el-table-column>
          <el-table-column property="weizhi" label="位置" align="center" />
          <el-table-column property="leixing" label="类型" align="center" />
          <el-table-column
            property="guanggaojieshao"
            label="广告介绍"
            width="300"
            align="center"
          />
          <el-table-column label="状态" align="center">
            <template #default="scope">
              <span>{{
                scope.row.shangjia.code == 0 ? "已下架" : "已上架"
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            property="updateTime"
            label="修改时间"
            width="180"
            align="center"
          />
          <el-table-column
            fixed="right"
            label="操作"
            width="200"
            align="center"
          >
            <template #default="scope">
              <el-button
                style="min-width: auto"
                link
                type="primary"
                size="small"
                @click.prevent="onOperation(scope.row, 'edit')"
                >编辑</el-button
              >
              <el-button
                style="min-width: auto"
                link
                type="primary"
                size="small"
                @click.prevent="changeStatus(scope.row)"
                >{{ scope.row.shangjia.code == 0 ? "上架" : "下架" }}</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<script setup>
import { reactive, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import {
  GetAdvertisementList,
  ChangeAdvertisementStatus,
} from "@/api/advertisement";
import { baseMsg } from "@/utils/utils";
const route = useRoute();
const router = useRouter();
let combineArr = [];
const state = reactive({
  list: [],
});

const flitterData = (arr) => {
  let spanOneArr = [];
  let concatOne = 0;
  arr.forEach((item, index) => {
    if (index === 0) {
      spanOneArr.push(1);
    } else {
      if (item.id === arr[index - 1].id) {
        spanOneArr[concatOne] += 1;
        spanOneArr.push(0);
      } else {
        spanOneArr.push(1);
        concatOne = index;
      }
    }
  });
  return {
    one: spanOneArr,
  };
};
// 前提返回的数据是根据id排序
const spanMethod = ({ row, column, rowIndex, columnIndex }) => {
  if (columnIndex === 0) {
    const _row = flitterData(state.list).one[rowIndex];
    const _col = _row > 0 ? 1 : 0;
    combineArr = [_row, _col];
    return combineArr;
  } else if (columnIndex === 5 || columnIndex === 6 || columnIndex === 7) {
    return combineArr;
  }
};
const GetList = () => {
  GetAdvertisementList().then((res) => {
    state.list = res.data;
  });
};
// 操作
const onOperation = (params, operation) => {
  if (operation === "add" || operation === "edit") {
    router.push({
      path: `/guanggao/info`,
      query: {
        id: params.id || null,
        type: operation,
      },
    });
  }
};
// 上下架
const changeStatus = async (value) => {
  const res = await ChangeAdvertisementStatus({ id: value.id });
  if (res.code === 4202) {
    baseMsg("修改成功");
    GetList();
  }
};
watch(
  () => route.query,
  () => {
    GetList();
  },
  { deep: true }
);
GetList();
</script>
<style lang="scss" scoped>
.header {
  border-bottom: 10px solid #f2f2f2;
}

.header-line1 {
  padding: 20px 10px;
  border-bottom: 1px solid #ccc;
  border-radius: 10px 10px 0 0;
}

.header-line2 {
  padding: 20px 10px;
}

.content {
  border: none !important;
  margin: 20px 10px;
  background-color: transparent !important;
  padding-bottom: 30px;
}
</style>
<style lang="scss">
.content-table .el-table__header th {
  background-color: #f2f9fc !important;
}
</style>
